<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="<%=request.getContextPath()%>/css/demo.css" rel="stylesheet"
	type="text/css" />
<script src="<%=request.getContextPath()%>/js/scripts/boot.js"
	type="text/javascript"></script>
<script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>
    <title>路口信息数据展示</title>
</head>
<body>
 
    
    <h1>道路监控数据展示</h1>
    <input type="button" value="OpenChart" onclick="showChartWindow()" />
    <div id="win1" class="mini-window" title="单位（辆次）" style="width:580px;height:450px;"
         showToolbar="false" showFooter="true" showModal="true" allowResize="true">

        <div  id="chartContainer" style="height:100%;width:100%;">></div>


    </div>
    
</body>
</html>

<script type="text/javascript">
    mini.parse();

    var option = {
     
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['七一路工业路口', '伏牛路白河路口']
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ['05-21', '05-22', '05-23', '05-24', '05-25', '05-26', '05-27']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '七一路工业路口',
                type: 'line',
                stack: '车流量',
                areaStyle: { normal: {} },
                data: [1200, 1320, 1001, 1034, 2000, 2130, 2210]
            },
            {
                name: '伏牛路白河路口',
                type: 'line',
                stack: '车流量',
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                areaStyle: { normal: {} },
                data: [1820, 1932, 1901, 1934, 1290, 1330, 1320]
            }
        ]
    };


    function buildChart() {

        var chart = echarts.init(document.getElementById('chartContainer'));
        chart.setOption(option);
    }
    function showChartWindow() {
        var win = mini.get("win1");
        win.show();
        buildChart();
    }
    showChartWindow()
</script>